<template>
	<div class="main">
		<div>
			<img src="@/assets/images/wechat/student/answer/pk.png">
		</div>
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/answer/2.png">
					<div class="left">
						<div>
							<img v-if="leftInfoData.avatar" :src="leftInfoData.avatar">
							<img v-else src="@/assets/images/wechat/student/answer/avatar.png">
						</div>
						<div>
							<div>{{leftInfoData.name}}</div>
							<div>{{contestData.senderScore}}</div>
						</div>
					</div>
				</div>
				<div>
					<img src="@/assets/images/wechat/student/answer/3.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/answer/1.png">
					<div class="right">
						<div>
							<div>{{rightInfoData.name}}</div>
							<div>{{contestData.recipientScore}}</div>
						</div>
						<div>
							<img v-if="rightInfoData.avatar" :src="rightInfoData.avatar">
							<img v-else src="@/assets/images/wechat/student/answer/avatar.png">
						</div>
					</div>
				</div>
			</div>
			<div>
				{{countDownData.format}}
			</div>
		</div>
		<div class="start">
			<div>
				<div>
					<img src="@/assets/images/wechat/student/answer/4.png">
				</div>
				<div>{{tip}}</div>
			</div>
			<div>第{{topicIndex+1}}题</div>
		</div>
		<div class="progress">
			<div>{{topicData.question}}</div>
			<div>
				<div v-for="(item,index) in topicData.answer" :key="index">
					<div v-if="index==0" @click="chooseAnswer('A')">A、{{item}}</div>
					<div v-else-if="index==1"  @click="chooseAnswer('B')">B、{{item}}</div>
					<div v-else-if="index==2" @click="chooseAnswer('C')">C、{{item}}</div>
					<div v-else @click="chooseAnswer('D')">D、{{item}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import router from '@/router/index'
	import { findContestById,updateContestById } from '@/api/contest'
	import { findStudentByToken,findStudentById } from '@/api/student'
	export default {
		components: {
			
		},
		data() {
			return {
				websocket: null,
				timer: null,
				tip: '请选择',
				countDownData: {
					format: '10',
					second: 100
				},
				contestData:{
					id: '',
					senderId: '',
					recipientId: '',
					topicId: '',
					senderScore: 0,
					recipientScore: 0,
					status: 0,
					createTime: 0,
					lockTime: 0,
					systemTime: 0
				},
				leftInfoData:{
					id: '',
					avatar: '',
					name:'----',
				},
				rightInfoData:{
					id: '',
					avatar: '',
					name:'----'
				},
				studentData: {
					id: '',
					type: 0 // 0邀请人 1参与人
				},
				topicFlag: true,
				topicIndex:0,
				topicData: {},
				topicList: []
			}
		},
		created:async function() {
			this.contestData.id=this.$route.query.id
			if(!this.contestData.id){
				router.replace("/wechatstudent/stucenter")
				return
			}
			
			/**********查询自己的信息*********/
			const ajaxData1 = {}
			const resultData1 = await findStudentByToken(ajaxData1)
			if(resultData1.code==200){
				if(resultData1.data.firstLogin){
					router.push({path:"/wechatstudent/studentinfo"})
					return
				}
				this.studentData.id = resultData1.data.id
			} else {
				return
			}
			
			/****查询比赛信息***/
			const ajaxData = {}
			ajaxData.id = this.contestData.id
			const resultData = await findContestById(ajaxData)
			if(resultData.code==200&&resultData.data.status==1){
				this.contestData.id=resultData.data.id
				this.contestData.senderId=resultData.data.senderId
				this.contestData.recipientId=resultData.data.recipientId
				this.contestData.senderScore=resultData.data.senderScore
				this.contestData.recipientScore=resultData.data.recipientScore
				this.contestData.status=resultData.data.status
				this.contestData.createTime=resultData.data.createTime
				this.contestData.lockTime=resultData.data.lockTime
				this.contestData.systemTime=resultData.data.systemTime
				this.topicList = resultData.data.topicFindResVoList
				if(this.contestData.senderId==this.studentData.id){
					//1.本人是创建者
					this.studentData.type = 0
					this.contestData.recipientScore = '答题中'
				} else {
					//1.本人是参与者
					this.studentData.type = 1
					this.contestData.senderScore = '答题中'
				}
			} else{
				router.replace("/wechatstudent/stucenter")
				return
			}
			
			/*****定位题的位置*****/
			this.countDownData.second = 105 - (this.contestData.systemTime - this.contestData.lockTime)
			console.log(this.countDownData.second)
			if(this.countDownData.second<=105&&this.countDownData.second>100){
				router.replace("/wechatstudent/stucenter")
				return
			} else if(this.countDownData.second<=100&&this.countDownData.second>=0) {
				this.topicIndex = -1 * parseInt((this.countDownData.second - 100) / 20)
				console.log(this.topicIndex)
			} else {
				router.replace({path:"/wechatstudent/balance",query:{id:this.contestData.id}})
				return
			}
			
			/****渲染题目*****/
			this.topicData = this.topicList[this.topicIndex]
			this.topicData.answer = JSON.parse(this.topicData.answer)
			this.countDown()
			
			/****查询对战人员***/
			this.findStudentById(this.contestData.senderId,0)
			this.findStudentById(this.contestData.recipientId,1)
		},
		beforeMount: function() {
	
		},
		mounted: function() {
			
		},
		beforeUnmount: function() {
			//每次进来先清理下定时器
			clearInterval(this.timer)
		},
		methods: {
			async chooseAnswer(item){
				if(!this.topicFlag){
					return
				}
				this.topicFlag=false
				if(item==this.topicData.rightKey){
					//答案正确
					this.$notify({
						type:'success',
						message:'回答正确'
					})
					//更新库
					const ajaxData = {}
					ajaxData.id = this.contestData.id
					if(this.studentData.type==0){
						this.contestData.senderScore += 10
						ajaxData.senderScore = this.contestData.senderScore
					}else{
						this.contestData.recipientScore += 10
						ajaxData.recipientScore = this.contestData.recipientScore
					}
					const resultData = await updateContestById(ajaxData)
				} else {
					//答案错误
					this.$notify({
						type:'danger',
						message:'回答错误'
					});
				}
				this.tip = '你的选择：'+item+'，正确答案：'+this.topicData.rightKey
			},
			async findStudentById(id,type) {
			  const ajaxData = {}
			  ajaxData.id = id
			  const resultData = await findStudentById(ajaxData)
			  if (resultData.code === 200) {
			    if(type == 0){
			    	this.leftInfoData = resultData.data
			    }else{
			    	this.rightInfoData = resultData.data
			    }
			  }
			},
			countDown() {
				this.timer = setInterval(()=>{
					this.countDownData.second--
					console.log(this.countDownData.second)
					let format = this.countDownData.second % 20
					this.countDownData.format = format
					if(this.countDownData.second == 0){
						clearInterval(this.timer)
						router.replace({path:"/wechatstudent/balance",query:{id:this.contestData.id}})
						return
					}
					if(this.countDownData.second % 20 == 0){
						this.topicIndex++
						this.topicData = this.topicList[this.topicIndex]
						this.topicData.answer = JSON.parse(this.topicData.answer)
						this.topicFlag=true
						this.tip = '请选择'
					}
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-image: url(../../../../assets/images/wechat/student/answer/bg.png);
		>div:nth-child(1){
			margin:auto;
			margin-top:19px;
			margin-bottom: 10px;
			width: 70px;
			height:45px;
			>img{
				width:100%;
			}
		}
		>div:nth-child(2){
			width:361px;
			margin:auto;
			position: relative;
			>div:nth-child(1){
				display: flex;
				align-items: center;
				justify-content: space-between;
				>div:nth-child(1),>div:nth-child(2),>div:nth-child(3){
					>img{
						width:100%;
					}
				}
				>div:nth-child(1){
					position: relative;
					>.left{
						position: absolute;
						left:3px;
						top:0;
						display: flex;
						height:44px;
						align-items: center;
						>div:nth-child(1){
							width: 38px;
							height: 38px;
							overflow: hidden;
							border-radius: 50%;
							>img{
								width:100%;
							}
						}
						>div:nth-child(2){
							margin-left:8px;
							>div:nth-child(1){
								font-size: 10px;
								font-weight: normal;
								color: #FFFFFF;
							}
							>div:nth-child(2){
								text-align: center;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}
				}
				>div:nth-child(3){
					position: relative;
					>.right{
						position: absolute;
						right:3px;
						top:0;
						display: flex;
						height:44px;
						align-items: center;
						>div:nth-child(2){
							width: 38px;
							height: 38px;
							overflow: hidden;
							border-radius: 50%;
							>img{
								width:100%;
							}
						}
						>div:nth-child(1){
							margin-right:8px;
							>div:nth-child(1){
								font-size: 10px;
								font-weight: normal;
								color: #FFFFFF;
							}
							>div:nth-child(2){
								text-align: center;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}
				}
			}
			>div:nth-child(2){
				position: absolute;
				left:0;
				right:0;
				top:0;
				bottom: 0;
				text-align: center;
				line-height: 44px;
				font-size: 18px;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		>.start{
			margin-top:30px;
			>div:nth-child(1){
				position: relative;
				>div:nth-child(1){
					width:196px;
					height: 34px;
					margin: auto;
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					position: absolute;
					left:0;
					right:0;
					top:0;
					bottom: 0;
					text-align: center;
					line-height: 34px;
					font-size: 16px;
					font-weight: normal;
					color: #FFFFFF;
				}
			}
			>div:nth-child(2){
				margin-top:26px;
				text-align: center;
				font-size: 34px;
				font-weight: normal;
				color: #61C6A8;
			}
		}
		>.progress{
			margin-top:40px;
			overflow: hidden;
			>div:nth-child(1){
				text-align: center;
				font-size: 13px;
				font-weight: normal;
				color: #FFFFFF;
			}
			>div:nth-child(2){
				margin-left: 10px;
				margin-right: 10px;
				margin-top:30px;
				>div{
					overflow: hidden;
					margin-bottom: 20px;
					min-height:30px;
					border-radius: 6px;
					background-color: #FFFFFF;
					>div{
						margin-left: 5px;
						margin-right: 5px;
						font-size: 12px;
						font-weight: normal;
						color: #630913;
						line-height: 20px;
						text-align: center;
					}
				}
			}
		}
	}
</style>
